<#include "/include/macros.ftl">
<@header></@header>
<@breadcrumb>
    <ol class="breadcrumb">
        <li><a href="/">首页</a></li>
        <li class="active">详情</li>
    </ol>
</@breadcrumb>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Meta, title, CSS, favicons, etc. -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="images/favicon.ico" type="image/ico" />

    <title>详情</title>
    <!-- Bootstrap -->
    <link href="../assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="../assets/css/font-awesome.min.css" rel="stylesheet">
    <!-- NProgress -->
    <link href="../assets/css/nprogress.css" rel="stylesheet">
    <!-- iCheck -->
    <link href="../assets/css/green.css" rel="stylesheet">

    <!-- bootstrap-progressbar -->
    <link href="../assets/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
    <!-- JQVMap -->
    <link href="../assets/css/jqvmap.min.css" rel="stylesheet"/>
    <!-- bootstrap-daterangepicker -->
    <link href="../assets/css/daterangepicker.css" rel="stylesheet">

    <!-- Custom Theme Style -->
    <link href="../assets/css/custom.min.css" rel="stylesheet">
    <style>
        *{
            cursor:default
        }
        .center_center{
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .bodys{
            border: 1px solid #ddd
        }
        .back{
            position: absolute;
            right: 0;
        }
        .addImg{
            min-height:100px;
            width: 200px;
            border:1px solid #ced4da;
            box-sizing: content-box;
            position: relative;
        }
        .addImg img{
            width: 200px;
            display: block;
        }
        .addImg>input{
            height:100%;
            width: 100%;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 2;
        }
        .editor-wrapper{
            padding: 10px;

        }
        .editor-wrapper>div{
            margin-top: 5px;
        }
        .editor-wrapper img{
            width: 100%;
        }
    </style>
</head>

<body class="nav-md">
<div class="container body">
    <div class="main_container">
        <!-- page content 中间的内容-->
        <div class="right_col" role="main">
            <div class="x_content" >
                <div class="item form-group">
                    <label class="col-form-label col-md-3 col-sm-3 label-align"><span style="font-weight: bold;">发布资讯</span></label>
                    <div class="col-md-6 col-sm-6" >
                        <button  class="btn btn-success  back" >返回</button>
                    </div>
                </div>
                <div class="item form-group">
                    <label class="col-form-label col-md-3 col-sm-3 label-align" for="first-name">标题 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 ">
                        <input type="text" id="first-name" required="required" class="form-control title">
                    </div>
                </div>
                <div class="item form-group">
                    <label class="col-form-label col-md-3 col-sm-3 label-align" for="first-name">封面图片 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 " style="display: flex;align-items: center;">
                        <div class="addImg">
                            <input type="file" />
                        </div>
                    </div>
                </div>
                <div class="item form-group">
                    <label class="col-form-label col-md-3 col-sm-3 label-align" for="first-name">来源 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 ">
                        <input type="text" id="first-name" required="required" class="form-control source">
                    </div>
                </div>
                <!-- 富文本 -->
                <div class="form-group item">
                    <label class="col-form-label col-md-3 col-sm-3 label-align">内容 <span class="required">*</label>
                    <div class="col-md-6 col-sm-6 fuwenben">
                        <div class="id id1">
                            <div id="alerts"></div>
                            <div class="btn-toolbar editor" data-role="editor-toolbar" data-target="#editor1">
                                <div class="btn-group">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font"><i class="fa fa-font"></i><b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                    </ul>
                                </div>

                                <div class="btn-group">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i>&nbsp;<b class="caret"></b></a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a data-edit="fontSize 5">
                                                <p style="font-size:17px">Huge</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a data-edit="fontSize 3">
                                                <p style="font-size:14px">Normal</p>
                                            </a>
                                        </li>
                                        <li>
                                            <a data-edit="fontSize 1">
                                                <p style="font-size:11px">Small</p>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                                <div class="btn-group">
                                    <a class="btn" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
                                    <a class="btn" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
                                    <a class="btn" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
                                    <a class="btn" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
                                </div>

                                <div class="btn-group">
                                    <a class="btn" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a>
                                    <a class="btn" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a>
                                    <a class="btn" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="fa fa-dedent"></i></a>
                                    <a class="btn" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a>
                                </div>

                                <div class="btn-group">
                                    <a class="btn" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
                                    <a class="btn" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
                                    <a class="btn" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
                                    <a class="btn" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
                                </div>

                                <div class="btn-group">
                                    <a class="btn dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="fa fa-link"></i></a>
                                    <div class="dropdown-menu input-append">
                                        <input class="span2" placeholder="URL" type="text" data-edit="createLink" />
                                        <button class="btn" type="button">Add</button>
                                    </div>
                                    <a class="btn" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-cut"></i></a>
                                </div>

                                <div class="btn-group">
                                    <a class="btn" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="fa fa-picture-o"></i></a>
                                    <input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
                                </div>

                                <div class="btn-group">
                                    <a class="btn" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
                                    <a class="btn" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
                                </div>

                            </div>

                            <div id="editor1" class="editor-wrapper"></div>

                            <textarea name="descr" id="descr" style="display:none;"></textarea>
                            <br />
                        </div>
                    </div>

                </div>
                <!-- 富文本 -->
                <div class="item form-group">
                    <label class="col-form-label col-md-3 col-sm-3 label-align" for="first-name">状态 <span class="required">*</span>
                    </label>
                    <div class="col-md-6 col-sm-6 item" style="align-items: center;">
                        <input name="Fruit" type="radio" value="" style="height: 20px;width: 20px;" class="pass"/>
                        <span style="margin-left: 5px;">启用</span>
                        <input name="Fruit" type="radio" value="" style="height: 20px;width: 20px; margin-left: 20px;" class="notpass" />
                        <span style="margin-left: 5px;">禁用</span>
                    </div>
                </div>
                <div class="item form-group center_center">
                    <button  class="btn btn-success btn-lg submited" style="min-width: 200px;">保存</button>
                </div>
            </div>

        </div>
        <!-- /page content中间的内容 -->

        <!-- footer content -->
        <footer>
            <div class="pull-right">
                Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
            </div>
            <div class="clearfix"></div>
        </footer>
        <!-- /footer content -->

    </div>
</div>
<!-- jQuery -->
<script src="../assets/js/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="../assets/js/bootstrap.bundle.min.js"></script>
<!-- FastClick -->
<script src="../assets/js/fastclick.js"></script>
<!-- NProgress -->
<script src="../assets/js/nprogress.js"></script>
<!-- Chart.js -->
<script src="../assets/js/Chart.min.js"></script>
<!-- gauge.js -->
<script src="../assets/js/gauge.min.js"></script>
<!-- bootstrap-progressbar -->
<script src="../assets/js/bootstrap-progressbar.min.js"></script>
<!-- iCheck -->
<script src="../assets/js/icheck.min.js"></script>
<!-- jQuery Tags Input -->
<script src="../assets/js/jquery.tagsinput.js"></script>
<!-- bootstrap-wysiwyg -->
<script src="../assets/js/bootstrap-wysiwyg.js"></script>
<script src="../assets/js/jquery.hotkeys.js"></script>
<script src="../assets/js/prettify.js"></script>
<!-- Skycons -->
<script src="../assets/js/skycons.js"></script>
<!-- Flot -->
<script src="../assets/js/jquery.flot.js"></script>
<script src="../assets/js/jquery.flot.pie.js"></script>
<script src="../assets/js/jquery.flot.time.js"></script>
<script src="../assets/js/jquery.flot.stack.js"></script>
<script src="../assets/js/jquery.flot.resize.js"></script>
<!-- Flot plugins -->
<script src="../assets/js/jquery.flot.orderBars.js"></script>
<script src="../assets/js/jquery.flot.spline.min.js"></script>
<script src="../assets/js/curvedLines.js"></script>
<!-- DateJS -->
<script src="../assets/js/date.js"></script>
<!-- JQVMap -->
<script src="../assets/js/jquery.vmap.js"></script>
<script src="../assets/js/jquery.vmap.world.js"></script>
<script src="../assets/js/jquery.vmap.sampledata.js"></script>
<!-- bootstrap-daterangepicker -->
<script src="../assets/js/moment.min.js"></script>
<script src="../assets/js/daterangepicker.js"></script>
<!-- Custom Theme Scripts -->
<script src="../assets/js/custom.min.js"></script>
<!-- Dropzone.js -->
<script src="../assets/js/dropzone.min.js"></script>
<!-- 分页 -->
<script src="../assets/js/pagination.js"></script>
<!-- 地址 -->
<script src="../assets/js/address.js"></script>
<script>
    let message={}
    $(document).ready(function(){
        //上传封面图片
        $(".addImg>input").on('change', function(){
            var _this = $(this)
            var formData = new FormData()
            formData.append('file',this.files[0])
            formData.append("userId", 1)
            $.ajax({
                url: "http://classic.wljiam.com/caapi/card/insertreminder",
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                success: (res) =>{
                    if($(this).parent()[0].children.length>1){
                        $(this).parent()[0].children[1].src=res.data
                    }else{
                        let img=new Image()
                        img.src=res.data
                        $(this).parent().append(img)
                        $(this).parent()[0].style.border='0'
                        $(this).parent()[0].style.minHeight='unset'
                    }
                }
            })
        })
        $(".submited").on('click', function(){
            let json={}
            json.title=$('.title')[0].value
            json.coverImage=$('.addImg>img')[0].src
            json.source=$('.source')[0].value
            json.content=$("#editor1")[0].innerHTML.replace(/<div>/g,"<p>").replace(/<\/div>/g,"</p>")
            json.state=$(".pass")[0].checked?1:0  //1启用:0禁用
            console.log(json)
            let formData = new FormData();
            formData.append('fineTitle',$('.title')[0].value);
            formData.append('source',$('.source')[0].value);
            formData.append('fineImage',$('.addImg>img')[0].src);
            formData.append('fineContent',$("#editor1")[0].innerHTML.replace(/<div>/g,"<p>").replace(/<\/div>/g,"</p>"));
            if ( $(".pass")[0].checked=true){
                formData.append('top',"0");
            }else if ($(".nitpass")[0].checked=true){
                formData.append('top',"1");
            }
            console.log(JSON.stringify(json.list))
            $.ajax({
                url: 'http://localhost:8086/backstageFineArt/insertSoft',
                type: "post",
                data: formData,
                processData: false,
                contentType: false,
                success: function(res){
                    console.log("success")
                }
            });
        })
    })
</script>
</body>
